/*
 * 有赞订单管理视图
 * @Author: zfx
 * @Date: 2018-07-18 14:00:07
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-customer-youzan-order-views {
		padding: 0 5px 5px 5px;
		background: #EFEFF1;
		.youzan-order-tabs {
			padding: 20px 20px 0;
			background-color: #fff;
			border-radius: 3px;
		}
    }

</style>

<template>

	<div class="v-customer-youzan-order-views">

		<div class="youzan-order-tabs">
			<Tabs
				type="card">

				<TabPane
					:label="$t('common.check')"
					class="order-tabpane"
					name="查看">

					<!-- 搜索组件 -->
					<search-form
						ref="youzanSynch"
						:favorable-stores="favorable_stores"
						@search="confirmSearch"
						@syncSale="syncSale"/>

					<order-index
						:loading="table_loading"
						:favorable-orders="favorable_orders.data"
						:favorable-stores="favorable_stores"
						@show="showDetails"/>

					<br>

					<!-- 分页组件 -->
					<Row
						type="flex"
						justify="center">
						<Page
							:total="favorable_orders.total"
							:current="favorable_orders.current_page"
							:page-size="query_info.per_page"
							placement="top"
							show-sizer
							show-total
							@on-change="pageChange"
							@on-page-size-change="perPageChange"/>

					</Row>

				</TabPane>
			</Tabs>
		</div>


		<!-- 有赞订单详情 -->
		<Modal
			v-model="show_modal"
			:title="$t('favorable_order.order_details_info')"
			class-name="vertical-middle-modal"
			width="1200">
			<order-details
				:show-modal="show_modal"
				:address-info="order_details.address_info"
				:remark-info="order_details.remark_info"
				:pay-info="order_details.pay_info"
				:buyer-info="order_details.buyer_info"
				:products-info="order_details.orders"
				:source-info="order_details.source_info"
				:order-info="order_details.order_info"
				:order-promotion="order_promotion"/>

			<div slot="footer"/>
		</Modal>

	</div>

</template>

<script>

import qs from 'qs';
import { mapMutations, mapGetters } from 'vuex';
import API_LIST from 'src/API_LIST';
import orderIndex from './index';
import searchForm from './search-form';
import orderDetails from './details';

export default {

	name: 'DeviceOrderViews',

	components: {
		orderIndex,

		searchForm,

		orderDetails,
	},
	data() {
		return {
			query_info: {
				page: 1,

				per_page: 20,

				// trad_no: '',
			},

			search_info: {
				page: 1,

				per_page: 20,
			}, // 分页信息

			table_loading: false, // 表格更新时的loading

			favorable_orders: [], // 设备账号列表

			show_modal: false, // 弹窗显示

			order_details: {}, // 订单详情

			order_promotion: {}, // 促销订单

			favorable_stores: [], // 店铺信息
		};
	},
	computed: {
		...mapGetters('userToken', [
			'getUserInfo',
			'getYouzanAuthorize',
		]),
	},
	mounted() {
		if (this.getYouzanAuthorize === 0) {
			this.table_loading = true;
			setTimeout(() => {
				this.table_loading = false;
			}, 500);
			return;
		} // 判断未授权有赞禁止调用接口
		this.fetchFavorableOrderList(this.search_info);
	},
	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 页码改变
         * @param  {string} pageNumber {当前页码}
         * @return {undefined}
         */
		pageChange(pageNumber) {
			this.search_info.page = pageNumber;

			this.search_info.per_page = this.query_info.per_page;

			this.fetchFavorableOrderList(this.search_info);
		},

		/**
         * 每页显示数改变
         * @param  {string} per_page {当前每页显示数}
         * @return {undefined}
         */
		perPageChange(per_page) {
			this.search_info.per_page = per_page;

			this.query_info.per_page = per_page;

			this.fetchFavorableOrderList(this.query_info);
		},

		/**
         * 确认搜索
         * @param  {String} keyword {关键词}
         * @param  {String} store_id {店铺ID}}
         * @return {undefined}
         */
		confirmSearch({ keyword, store_id }) {
			this.query_info.keyword = keyword || '';

			this.query_info.store_id = store_id || '';

			this.search_info = JSON.parse(JSON.stringify(this.query_info));

			this.$refs.youzanSynch.resetParam();

			this.fetchFavorableOrderList(this.query_info);
		},

		/**
         * 更新有赞订单列表信息
		 * @param {String} id {订单id}
         * @param  {Object} param {需要更新的参数对象}
         * @return {undefined}
         */
		updateFavorableOrder(id, param) {
			this.showSpin();

			this.$http.post(`${API_LIST.CUST_FAVORABLE_ORDER}/${id}`, param)
				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('common.update_success'));

					this.show_modal = false;

					this.fetchFavorableOrderList(this.search_info);
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},

		/**
         * 获取有赞订单列表
         * @param  {Object} param {搜索列表的参数}
         * @return {undefined}
         */
		fetchFavorableOrderList(param) {
			this.table_loading = true;

			const query_str = qs.stringify(param);

			this.$http.get(`${API_LIST.CUST_FAVORABLE_ORDER}?${query_str}`)
				.then(({ data }) => {
					if (Number(data.code) !== 0) throw new Error(data.error);

					this.favorable_orders = data.orders;
					this.favorable_stores = data.stores;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => { this.table_loading = false; });
		},

		/**
		 * 同步有赞订单列表
		 * @param {Object} param {需要同步的参数}
		 * @return {undefined}
		 */
		syncSale(param) {
			this.showSpin(this.$t('common.please_wait'));

			const query_str = qs.stringify(param);

			this.$http.post(`${API_LIST.CUST_FAVORABLE_ORDER}`, query_str)

				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);
					this.fetchFavorableOrderList(this.query_info);
					this.$Message.success(this.$t('common.sync_success'));
				})

				.catch((err) => {
					this.$Message.error(err.message);
				})
				.finally(this.closeSpin);
		},

		/**
         * 查看订单详情页
         * @param  {Number} number {订单详情的订单号}
         * @return {undefined}
         */
		showDetails(number) {
			this.fetchOrderDetatils(number);
		},

		/**
		 * 获取有赞订单详情信息
		 * @param {Object} param {需要获取订单详情的对象}
		 * @return {undefined}
		 */
		fetchOrderDetatils(param) {
			this.showSpin();
			this.$http.get(`${API_LIST.CUST_FAVORABLE_ORDER}/${param}`)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);
					this.order_details = data.order_info.full_order_info;
					this.order_promotion = data.order_info.order_promotion;
					this.show_modal = true;
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(this.closeSpin);
		},
	},
};
</script>
